Skip to content

IDEA-2: Tier 2 Form Controls And Overlays - #2

Merged
croco-dendy merged 10 commits into
mainfrom
feat/idea-2-tier-2-form-controls-and-overlays
Aug 4, 2026
Merged

IDEA-2: Tier 2 Form Controls And Overlays#2
croco-dendy merged 10 commits into
mainfrom
feat/idea-2-tier-2-form-controls-and-overlays

Conversation

@paper-scout

@paper-scout paper-scout Bot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Plan: IDEA-2 TIER-2 — see papercamp/ideas/IDEA-2 TIER-2.md for the full idea and its plan.

This PR was auto-created as a draft on the first push to this feature branch.
Promote to "Ready for review" when the plan reaches review status.

croco-dendy and others added 9 commits August 4, 2026 17:01
Input and Textarea ship the label/helperText/error/size (sm/md) API with
native DOM onChange, matching the paper-ui call sites. The control id is
auto-generated with useId unless the caller passes one, and the label wires
to it via htmlFor. helperText and error share one line: error replaces
helperText and flips aria-invalid plus aria-describedby, and the inset
border re-tints to --fui-status-error-text.

size intentionally shadows the native input size attribute (numeric px),
hence InputProps Omit<>s it from InputHTMLAttributes.

The frosted inset-bordered look mirrors Card and secondary Button:
--fui-surface fill with backdrop blur that resolves to none inside Glass,
and a 2px inset in --fui-shadow-color that goes accent on focus.

Visual check of sm/md proportions is left to a human (headless run);
verification was check-types + lint + build only.
… hidden native select for forms)

Refs: IDEA-2
…k, Escape) with Body/Footer/Error compound parts

Refs: IDEA-2
Clickable list row built on a native <button>: leading icon slot,
ellipsis-truncated content, and a trailing action slot for badges or
secondary controls. `active` renders the accent left-bar + tint used by
sidebar/nav call sites and sets aria-current. sm/md sizing matches the
other Tier 2 controls; size names use the film-ui sm/md convention rather
than paper-ui's `small` string.

Visual check left to a human — this run is headless with no browser.
Verified with check-types, biome, and stylelint.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ntation, label)

Alert: info/success/warning/error variants over the --fui-status tokens,
each with a variant icon and status-colored left accent bar; dismissible
adds a close button wired to onDismiss. role="alert" for error/warning,
role="status" otherwise. Spreads HTMLAttributes<HTMLDivElement>.

Divider: horizontal/vertical orientations render a semantic <hr>; a
horizontal label renders a flex wrapper with <hr> lines flanking the
label (keeps biome's useSemanticElements/useFocusableInteractive happy
without role hacks). Line color via color-mix on --fui-text.

Verification: check-types, biome, stylelint, and build all green. Visual
review in a browser is left to a human — this was done headless with no
display.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Spinner: sm/md/lg ring that spins via a linear keyframe over --fui-accent
on a color-mixed --fui-text track; renders a semantic <output> (implicit
role="status") with an aria-label so it announces without a role hack.
Reduced-motion slows the spin to a crawl rather than freezing it.

Progress: native <progress> for free progressbar semantics (no ARIA, no
focusable-interactive lint). value/max clamped; fill color overridable via
a --fui-progress-fill custom property piped to the ::-webkit/-moz value
pseudo-elements, height via inline style. Square film edges, no radius.

Skeleton: text/rect/circle variants, width/height props, glossy shimmer
sweep over a faint --fui-text tint; shimmer disabled under reduced-motion.

All export from the barrel. Verification: check-types, biome, stylelint,
and build all green. Visual review in a browser is left to a human — this
was done headless with no display.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copied from paper-camp: pushes to feat/*, fix/*, refactor/*, chore/*,
docs/* branches named with an idea id (e.g. feat/idea-9-select) get a
draft PR via the Scout app if none exists. Direct pushes to main are
untouched.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@croco-dendy croco-dendy changed the title IDEA-2 TIER-2: Tier 2 Form Controls And Overlays IDEA-2: Tier 2 Form Controls And Overlays Aug 4, 2026
Branch slugs containing a second word-digit token (e.g. "tier-2")
made grep return multiple matches and mangled the PR title with a
newline. head -1 keeps the leading idea id.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@croco-dendy
croco-dendy marked this pull request as ready for review August 4, 2026 19:05
@croco-dendy
croco-dendy merged commit e87bc1c into main Aug 4, 2026
2 checks passed
@croco-dendy
croco-dendy deleted the feat/idea-2-tier-2-form-controls-and-overlays branch August 4, 2026 19:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant